<template>
  <div class="base-content system-dict">
    <div class="basic-info">
      <!--操作栏-->
      <div class="base-content-operate">
        <el-button
          v-rights="'Add'"
          icon="el-icon-plus"
          type="primary"
          @click="add"
          >{{ btn.Add }}</el-button
        >
      </div>
      <!--列表-->
      <el-table
        ref="table"
        v-loading="tableLoad"
        :data="tableData"
        :tree-props="{ children: 'children', hasChildren: '!hasChildren' }"
        row-key="id"
        height="calc(100% - 130px)"
        style="width: 100%"
      >
        <el-table-column prop="name" :label="dataList.Name" min-width="120">
          <template slot-scope="{ row }">
            <div class="extend-content" @click="openExtend(row)">
              <i
                v-if="row.hasChildren && row.expanded"
                class="el-icon-arrow-down"
              ></i>
              <i
                v-if="row.hasChildren && !row.expanded"
                class="el-icon-arrow-right"
              ></i>
              <span
                :style="{ 'padding-left': !row.hasChildren ? '16px' : '' }"
                >{{ row.name }}</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dictCode" :label="dataList.DictionaryEncoding" min-width="80">
        </el-table-column>
        <el-table-column prop="value" :label="dataList.DictionaryValue" min-width="80">
        </el-table-column>
        <el-table-column prop="operation" :label="btn.operate" width="140">
          <template slot-scope="{ row }">
            <el-link v-rights="'Add'" type="primary" @click="add(row)"
              >{{ btn.Add }}</el-link
            >
            <el-divider
              class="base-content-table-divider"
              direction="vertical"
            />
            <el-link v-rights="'Edit'" type="primary" @click="edit(row)"
              >{{ btn.Edit }}</el-link
            >
            <el-divider
              class="base-content-table-divider"
              direction="vertical"
            />
            <el-link v-rights="'Delete'" type="danger" @click="del(row)"
              >{{ btn.Delete }}</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--新增/编辑-->
    <SystemDictDialog
      v-model="isShowDialog"
      :read-only="readOnly"
      :parent-id="parentId"
      :edit-id="editId"
      @success="dialogCallBack"
    />
  </div>
</template>

<script>
import { getDictTree, dictDelete } from "../../../api/System/SystemDict.js";
import SystemDictDialog from "./SystemDictDialog";
import { formatData, getArrayIndex } from "../../../utils/index";

export default {
  name: "SystemDictList",
  components: {
    SystemDictDialog,
  },
  data() {
    return {
      tableLoad: false,
      tableData: [],
      isShowDialog: false,
      readOnly: false,
      editId: null,
      parentId: null,
      dictCode: null,
      expandRowkeys: [],
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleSystem.buttons");
    },
    dataList() {
      return this.$t("ModuleSystem.System");
    },
  },
  created() {
    this.getDictTree();
  },
  methods: {
    // 获取部门数据
    getDictTree() {
      this.tableLoad = true;
      getDictTree()
        .then((res) => {
          // 格式化数据
          const formatTableData = formatData(res.data, {
            label: "name",
            value: "value",
          });
          // 默认展开
          this.isExpand(formatTableData, this.expandRowkeys);
          this.tableData = formatTableData;
          this.tableLoad = false;
        })
        .catch(() => {
          this.tableLoad = false;
        });
    },
    // 是否展开
    isExpand(data, expandIds) {
      if (data.length) {
        data.forEach((v) => {
          v.expanded = expandIds.includes(v.id);
          // 只有父级展开 子级才会展开
          if (v.expanded && v.children && v.children.length) {
            this.isExpand(v.children, expandIds);
          }
        });
      }
    },
    // 新增
    add(row) {
      this.clearInfoState();
      this.parentId = row.id;
      this.isShowDialog = true;
    },
    // 修改
    edit(row) {
      this.clearInfoState();
      this.editId = row.id;
      this.isShowDialog = true;
    },
    // 清空弹框状态
    clearInfoState() {
      this.readOnly = false;
      this.editId = "";
      this.parentId = "";
    },

    // 删除
    del(row) {
      const self = this;
      this.$confirm(this.$t("ModuleSystem.buttons.IsDeleteFlow"), this.$t("ModuleSystem.buttons.Delete"), {
        type: "warning",
        confirmButtonText: this.$t("ModuleSystem.buttons.Confirm"),
        okType: "danger",
        center: true,
        cancelButtonText: this.$t("ModuleSystem.buttons.Cancel"),
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            dictDelete({ id: row.id })
              .then(() => {
                instance.confirmButtonLoading = false;
                done();

                self.getDictTree();
              })
              .catch(() => {
                instance.confirmButtonLoading = false;
              });
          } else {
            done();
          }
        },
      }).catch();
    },
    // 查看子级
    openExtend(row) {
      row.expanded = !row.expanded;
      // 展开
      if (row.expanded) {
        this.expandRowkeys.push(row.id);
      } else {
        // 收起
        this.expandRowkeys.splice(getArrayIndex(this.expandRowkeys, row.id), 1);
      }
      this.$refs.table.toggleRowExpansion(row, row.expanded);
    },
    // 弹框回调
    dialogCallBack() {
      this.getDictTree();
    },
  },
};
</script>

<style lang="scss">
.system-dict {
  .basic-info {
    .extend-content {
      cursor: pointer;
      .open-extend-icon {
        margin: 0 5px 0 0;
        transform: rotate(-90deg);
        transition: all 0.3s;
      }
      .expanded-row {
        transform: rotate(0);
      }
    }
    .el-table {
      .el-table__expand-icon {
        display: none;
      }

      .el-table__indent,
      .el-table__placeholder {
        display: none;
      }
    }
    .el-table::before {
      position: relative;
    }
  }
}
</style>
